<template>
  <div>
    <!-- 头部搜索框 -->
    <header class="header-container">
      <van-search
        v-model="searchValue"
        @search="onSearch"
        show-action
        shape="round"
        clearable
        placeholder="请输入搜索关键词"
        maxlength="20"
      >
        <template #action>
          <div class="search-button" @click="onSearch">搜索</div>
        </template>
        <template #left>
          <van-icon
            @click="$router.back()"
            color="#888"
            style="margin-right: 10px"
            name="arrow-left"
            size="0.5rem"
          />
        </template>
      </van-search>
    </header>
    <!-- 标签 -->
    <van-tabs
      v-model:active="active"
      sticky
      animated
      border
      line-width="1rem"
      title-active-color="#477fc6"
      ref="tabs"
      :lazy-render="true"
      swipeable
      @click="firstLoad"
    >
      <van-tab v-for="(item, i) in type" :key="item" :title="item" :name="item">
        <div style="min-height: calc(100vh - 100px)">
          <!-- 封装的组件 -->
          <find-list
            :findType="item"
            :ismine="true"
            :ref="(el) => (child[i] = el)"
            :style="active !== item ? 'height:calc(100vh - 100px)' : ''"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, ref, watch, onMounted } from 'vue'
import { Search, Tab, Tabs, Sticky, Button, Icon } from 'vant'
import FindList from '@/components/FindModuleComponents/FindList.vue'
export default {
  name: 'list',
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    [Button.name]: Button,
    [Icon.name]: Icon,
    FindList
  },
  setup() {
    const state = reactive({
      loadVideo : false,
      // 搜索框内容
      searchValue: '',
      // 激活的tab
      active: '文章',
      // tab数组
      type: ['文章', '视频'],
      // 是否搜索
      isSearch: false
    })
    // FindList组件
    let child = ref([])
    // tabs组件，用于resize时重绘
    const tabs = ref(null)
    onMounted(() => {
      //child.value[0].onRefresh()
    })
    // 侦听搜索框，为空时将issearch置为false并重置左右发现内容
    watch(
      () => state.searchValue,
      (newVal, oldVal) => {
        if (state.isSearch && newVal === '') {
          child.value[0].setInit()
          child.value[1].setInit()
          state.isSearch = false
        }
      }
    )
    // 搜索事件
    const onSearch = () => {
      // 为空时不搜索
      if (state.searchValue === '') {
        return
      }
      child.value[0].onSearch(state.searchValue)
      child.value[1].onSearch(state.searchValue)
      state.isSearch = true
    }

     //懒加载的实现
    const firstLoad = (name) => {
       if(state.loadVideo) return;      
       if(name == "视频"){
          state.loadVideo = true;
          child.value[1].onRefresh()       
       }
      
    }

    return {
      ...toRefs(state),
      onSearch,
      child,
      tabs,
      firstLoad
    }
  }
}
</script>

<style lang="less" scoped >
// 头部标签
:deep(.van-tab) {
  font-weight: 500;
  border: 2px solid #fff;
}
:deep(.van-tabs__line) {
  background: #4389fc;
}
:deep(.van-list) {
  padding-bottom: 0px;
}
// 头部
.header-container {
  // 搜索按钮
  .search-button {
    color: #aaa;
    width: 40px;
    margin: 0 10px;
  }
}

// 列表
.list-container {
  width: 49%;
  .list-item {
    break-inside: avoid;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px #858585;
    margin-bottom: 8px;
    padding-bottom: 5px;
    overflow: hidden;
    .list-content {
      .list-item-detail {
        position: relative;
        .cover {
          max-height: 400px;
        }
        .list-item-detail-title {
          white-space: normal;
          word-break: break-all;
          margin: 0 10px;
          padding-top: 5px;
          margin-bottom: 10px;
          font-size: 14px;
          text-align: left;
          font-weight: 600;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 40px;
          line-height: 20px;
        }
        .list-item-detail-footer {
          padding: 5px 5px 5px 0;
          display: flex;
          justify-content: space-between;
          .list-item-detail-footer-left {
            display: flex;
            align-items: center;
            div {
              margin-left: 5px;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 60px;
              text-align: left;
            }
          }
          .list-item-detail-footer-right {
            display: flex;
            align-items: center;
            span {
              padding-left: 2px;
              font-size: 12px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
// 错位布局容器
.container {
  display: flex;
  width: 98%;
  margin: 5px auto 0;
  justify-content: space-between;
}
// 播放icon
.icon-position {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 10px;
}
</style>